<template>
  <h1>业务1：坐标</h1>
  <p>x: {{ mouse.x }}</p>
  <p>y: {{ mouse.y }}</p>
  <hr />
  <h2>{{ number }}</h2>
  <button @click="btn(10)">点击加10</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

// 🔔 业务1：获取鼠标坐标
const useMouse = () => {
  // 定义响应式对象数据
  const mouse = reactive({ x: 0, y: 0 })

  const fn = e => {
    // console.log(e)
    mouse.x = e.clientX
    mouse.y = e.clientY
  }

  onMounted(() => {
    // 事件绑定到了 document 上，卸载的时候 document 的时间默认还在，所以需要主动在卸载时，移除事件
    document.addEventListener('mousemove', fn)
  })

  onUnmounted(() => {
    // 要主动在卸载时，主动移除事件
    document.removeEventListener('mousemove', fn)
  })

  return { mouse }
}

// 🔔 业务2：计数器
const useCount = () => {
  const number = ref(0)
  const btn = val => {
    number.value += val
  }
  return { number, btn }
}

export default {
  name: 'App',
  setup() {
    // setup 里面的 return 是返回给模板使用的
    return {
      // 🔔 调用函数，把返回的响应式数据解构出来用于页面绑定
      ...useMouse(),
      ...useCount(),
    }
  },
}
</script>

<style></style>